<template>
  <div class="question-container">
    <el-card>
      <!-- 新增试题按钮 -->
      <el-row :gutter="18">
        <el-col>
          <el-button
            type="success"
            icon="el-icon-edit"
            class="addQuestions"
            @click="$router.push({path:'/questions/new'})"
            >新增试题</el-button
          >
        </el-col>
      </el-row>
      <!-- 搜索表单 -->
      <el-form ref="searchFormRef" label-width="90px" :model="searchForm">
        <!-- 第一行 -->
        <el-row :gutter="8">
          <!-- 学科 -->
          <el-col :span="6">
            <el-form-item label="学科">
              <el-select
                placeholder="请选择"
                :value="searchForm.subjectID"
                v-model="searchForm.subjectID"
                @change="getDiretory"
              >
                <el-option
                  :label="item.label"
                  :value="item.value"
                  v-for="item in subjectlist"
                  :key="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 二级目录 -->
          <el-col :span="6">
            <el-form-item label="二级目录">
              <el-select
                placeholder="请选择"
                value=""
                v-model="diretiorylist.subjectID"
              >
                <el-option
                  :label="item.label"
                  :value="item.label"
                  v-for="item in diretiorylist"
                  :key="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 标签 -->
          <el-col :span="6">
            <el-form-item label="标签">
              <el-select placeholder="请选择" value="" v-model="tagList.value">
                <el-option
                  :label="item.label"
                  :value="item.label"
                  v-for="item in tagList"
                  :key="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 关键字 -->
          <el-col :span="6">
            <el-form-item label="关键字">
              <el-input v-model="searchForm.keyword"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第二行 -->
        <el-row :gutter="8">
          <!-- 试题类型 -->
          <el-col :span="6">
            <el-form-item label="试题类型">
              <el-select
                placeholder="请选择"
                value=""
                v-model="searchForm.questionType"
              >
                <el-option
                  :label="item.label"
                  :value="item.label"
                  v-for="item in questionType"
                  :key="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 难度 -->
          <el-col :span="6">
            <el-form-item label="难度">
              <el-select
                placeholder="请选择"
                value=""
                v-model="searchForm.difficulty"
              >
                <el-option
                  :label="item.label"
                  :value="item.label"
                  v-for="item in difficulty"
                  :key="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!--方向  -->
          <el-col :span="6">
            <el-form-item label="方向">
              <el-select
                placeholder="请选择"
                value=""
                v-model="searchForm.direction"
              >
                <el-option
                  :label="item"
                  :value="item"
                  v-for="(item, i) in direction"
                  :key="i"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 录入人 -->
          <el-col :span="6">
            <el-form-item label="录入人">
              <el-select placeholder="请选择" value="" v-model="userlist.id">
                <el-option
                  :label="item.username"
                  :value="item.username"
                  v-for="(item, index) in searchForm.userlist"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第三行 -->
        <el-row :gutter="8">
          <!-- 题目备注 -->
          <el-col :span="6">
            <el-form-item label="题目备注">
              <el-input v-model="searchForm.remarks"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <!-- 企业简称 -->
            <el-form-item label="企业简称">
              <el-input v-model="searchForm.shortName"></el-input>
            </el-form-item>
          </el-col>
          <!-- 城市 -->
          <el-col :span="6">
            <el-form-item label="城市">
              <el-row :gutter="8">
                <el-col :span="12">
                  <el-select
                    placeholder="请选择"
                    value=""
                    v-model="searchForm.provinces"
                    @change="getCitys"
                  >
                    <el-option
                      :label="item"
                      :value="item"
                      v-for="(item, index) in provinceslist"
                      :key="index"
                    ></el-option>
                  </el-select>
                </el-col>
                <el-col :span="11">
                  <el-select
                    placeholder="请选择"
                    value=""
                    v-model="searchForm.citys"
                  >
                    <el-option
                      :label="item"
                      :value="item"
                      v-for="(item, index) in cityslist"
                      :key="index"
                    ></el-option>
                  </el-select>
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
          <!-- 按钮 -->
          <el-col :span="6">
            <el-form-item>
              <el-row :gutter="5" style="float: right">
                <el-col :span="12">
                  <el-button size="small" @click="clearForm"
                    >清除</el-button
                  ></el-col
                >
                <el-col :span="12">
                  <el-button type="primary" size="small" @click="searchBtn"
                    >搜索</el-button
                  ></el-col
                >
              </el-row>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 警告 -->
      <el-alert :title="`数据一共${total}条`" type="info" show-icon> </el-alert>
      <!-- 表格区域 -->
      <el-table style="width: 100%" :data="questionlist">
        <el-table-column label="试题编号" prop="number" width="100px"
          >{{ questionlist.number }}
        </el-table-column>
        <el-table-column label="学科" prop="subject"
          >{{ questionlist.subject }}
        </el-table-column>
        <el-table-column label="目录" prop="catalog">
          {{ questionlist.catalog }}</el-table-column
        >
        <el-table-column label="题型" prop="questionType">
          <template slot-scope="scope">
            <span v-if="scope.row.questionType === '1'">单选</span>
            <span v-else>多选</span>
          </template>
        </el-table-column>
        <el-table-column label="题干" prop="question" width="240px">
          <template slot-scope="scope">
            <span v-html="scope.row.question"></span>
          </template>
        </el-table-column>
        <el-table-column label="录入时间" prop="addDate" width="160px"
          ><template slot-scope="scope">{{
            scope.row.addDate | parseTime
          }}</template>
        </el-table-column>
        <el-table-column label="难度" prop="difficulty">
          <template slot-scope="scope">
            <span v-if="scope.row.difficulty == '1'">简单</span>
            <span v-else-if="scope.row.difficulty == '2'">一般</span>
            <span v-else>困难</span>
          </template>
        </el-table-column>
        <el-table-column label="录入人" prop="creator"
          >{{ questionlist.creator }}
        </el-table-column>
        <el-table-column label="操作" width="180px">
          <template slot-scope="scope">
            <!-- 预览按钮 -->
              <el-tooltip content="预览" placement="bottom-start" :enterable='false' effect="light" :open-delay="500">
            <el-button
              type="primary"
              icon="el-icon-view"
              circle
              plain
              size="mini"
              @click="showDetails(scope.row)"
            ></el-button>
              </el-tooltip>
                <el-tooltip content="编辑" placement="bottom-start" :enterable='false' effect="light" :open-delay="500">
            <el-button
              type="success"
              icon="el-icon-edit"
              circle
              plain
              size="mini"
              @click="editDialig(scope.row)"
            ></el-button>
                </el-tooltip>
                  <el-tooltip content="删除" placement="bottom-start" :enterable='false' effect="light" :open-delay="500">
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              plain
              size="mini"
              @click="deleteQuestion(scope.row)"
            ></el-button>
                  </el-tooltip>
            <el-tooltip content="加入精选" placement="bottom-start" :enterable='false' effect="light" :open-delay="500">
            <el-button
              type="warning"
              icon="el-icon-check"
              circle
              plain
              size="mini"
              @click="addToChioce(scope.row)"
            >
            </el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        style="float: right; margin: 10px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.page"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="queryInfo.pagesize"
        layout="sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <!-- 预览弹出框 -->
    <el-dialog
      title="题目预览"
      :visible.sync="showdDetailDialogVisible"
      width="900px"
      @close="DialogClosed"
    >
      <!-- 内容部分 -->
      <el-row :gutter="20">
        <el-col :span="6">
          <span
            >【题型】：
            <span v-if="detailslist.questionType == '1'">单选题</span
            ><span v-else>多选题</span>
          </span>
        </el-col>
        <el-col :span="6">
          <span>【编号】：{{ detailslist.id }}</span>
        </el-col>
        <el-col :span="6">
          <span
            >【难度】：
            <span v-if="detailslist.difficulty === '1'">简单</span>
            <span v-else-if="detailslist.difficulty === '2'">一般</span>
            <span v-else>困难</span>
          </span>
        </el-col>
        <el-col :span="6">
          <span>【标签】：{{ detailslist.tags }}</span>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="margin-top: 20px">
        <el-col :span="6">
          <span>【学科】：{{ detailslist.subjectName }}</span>
        </el-col>
        <el-col :span="6">
          <span>【目录】：{{ detailslist.directoryName }}</span>
        </el-col>
        <el-col :span="12">
          <span>【方向】：{{ detailslist.direction }}</span>
        </el-col>
      </el-row>
      <hr />
      <div style="margin: 0px">
        <el-col>【题干】</el-col>
        <el-link
          type="primary"
          v-html="detailslist.question"
          style="color: blue"
        ></el-link>
      </div>
      <!-- <div>
        <span v-if="detailslist.questionType == '1'">单选题</span
        ><span v-else>多选题</span> 选项：（以下选中的答案为正确答案）
      </div> -->
      <div v-if="detailslist.questionType === '1'">
        <div style="margin: 0 2px 15px">
          <span v-if="detailslist.questionType == '1'">单选题</span
          ><span v-else-if="detailslist.questionType == '2'">多选题</span>
          选项：（以下选中的答案为正确答案）
        </div>
        <el-radio
          :label="1"
          style="display: block; margin: 15px"
          v-for="(item, index) in detailslist.options"
          :key="index"
          v-model="item.isRight"
          class="disable"
          >{{ item.title }}</el-radio
        >
      </div>
      <div v-else-if="detailslist.questionType === '2'">
        <div>
          <span v-if="detailslist.questionType == '1'">单选题</span
          ><span v-else-if="detailslist.questionType == '2'">多选题</span>
          选项：（以下选中的答案为正确答案）
        </div>
        <el-checkbox
          class="disable"
          :label="1"
          style="display: block; margin: 15px"
          v-for="(item, index) in detailslist.options"
          :key="index"
          :checked="item.isRight === 1"
          >{{ item.title }}</el-checkbox
        >
      </div>
      <!-- 简答 -->
      <hr />
      <div>
        <span>【参考答案】：</span
        ><el-button
          type="danger"
          @click="videoState = true"
          style="
            width: 104px;
            height: 32px;
            font-size: 12px;
            margin-bottom: 10px;
          "
          >视频答案预览</el-button
        >
        <div
          v-if="videoState == true"
          style="
            width: 400px;
            height: 300px;
            display: flex;
            align-items: center;
          "
        >
          <video
            :src="detailslist.videoURL"
            frameborder="0"
            allow="autoplay;encrypted-media"
            allowfullscreen
            style="width: 100%; height: 100%"
            controls
            autoplay
          ></video>
        </div>
      </div>
      <hr />
      <div style="margin: 15px 0">
        【答案解析】：<span v-html="detailslist.answer"></span>
      </div>
      <hr />
      <div>
        <span>【题目备注】：{{ detailslist.remarks }}</span>
      </div>

      <!-- 按钮部分 -->
      <div slot="footer" class="dialog-footer center-dia">
        <el-button @click="showdDetailDialogVisible = false" type="primary"
          >关闭</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { simple as simpleTags } from "@/api/hmmm/tags";
import { simple as simpleDir } from "@/api/hmmm/directorys";
import { provinces, citys } from "@/api/hmmm/citys";
import { list as list1, simple as simpleSub } from "@/api/hmmm/subjects";
import { list, detail, remove, choiceAdd } from "@/api/hmmm/questions";
import { parseTime } from "@/utils/index";
import { difficulty, questionType, direction } from "@/api/hmmm/constants";
import { simple } from "@/api/base/users";
import { log } from "util";
export default {
  name: "questions",
  data() {
    return {
      ischoice: {
        id: "",
        choiceState: "1",
      },
      // 搜索表单
      searchForm: {
        // 学科
        subjectID: "",
        // 关键字
        keyword: "",
        // 题目备注
        remarks: "",
        // 企业简称
        shortName: "",
        options: [],
        // 一级城市
        provinces: "",
        // 地区
        citys: "",
        userlist: [],
        questionType: "",
      },
      // 一级城市的值
      provinceslist: [],
      // 地区
      cityslist: [],
      // 方向
      direction: [],
      // 试题难度
      difficulty: [],
      // 试题类型
      questionType: [],
      // 录入人
      userlist: [],
      // userlist1: [],
      // 学科列表
      subjectlist: [],
      // 数据总条数
      total: 0,
      //基础题库列表
      questionlist: [],
      // 基础题库列表参数
      queryInfo: {
        page: 1,
        pagesize: 5,
        // keyword: "",
        // userlist2: [],
        // subjectID: null,
      },
      // 查看弹出框的显示和隐藏
      showdDetailDialogVisible: false,
      // 基础题详细列表
      detailslist: [],
      // 视频显示和隐藏
      videoState: false,
      // 二级目录列表
      diretiorylist: [],
      // 标签列表
      tagList: [],
    };
  },
  methods: {
    // 获取学科列表
    async getSubjectsList() {
      try {
        const { data: res } = await simpleSub();
        this.subjectlist = res;
      } catch (err) {
        this.$mesage.error("获取学科列表失败！");
      }
    },
    // 当学科的选项发生变化的时候，就会获取不同的二级目录以及标签列表
    async getDiretory() {
      try {
        // 二级目录传递的参数就是学科的subjectID
        const res = await simpleDir({ subjectID: this.searchForm.subjectID });
        this.diretiorylist = res.data;
      } catch (err) {
        return this.$mesage.error("获取二级目录列表失败！");
      }
      //  获取标签列表
      try {
        const res = await simpleTags({ subjectID: this.searchForm.subjectID });
        this.tagList = res.data;
      } catch (err) {
        return this.$mesage.error("获取标签列表失败！");
      }
    },
    //  获取用户列表数据
    async getUserList() {
      try {
        const { data } = await simple();
        this.userlist = data;
        this.searchForm.userlist = data;
      } catch (err) {
        return;
      }
      // 遍历选项
    },
    // 获取基础题库列表
    async getQuestionsList() {
      try {
        const { data } = await list(this.queryInfo);
        this.questionlist = data.items;
        this.total = data.counts;
      } catch (err) {
        this.$mesage.error("获取题库列表失败！");
      }
    },
    // 分页
    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize;
      this.getQuestionsList();
    },
    handleCurrentChange(newPage) {
      this.queryInfo.page = newPage;
      this.getQuestionsList();
    },
    //  表单的清除功能
    clearForm() {
      this.searchForm.subjectID = "";
      this.diretiorylist = [];
      this.tagList = [];
      this.queryInfo.keyword = "";
      this.searchForm.questionType = "";
      this.searchForm.difficulty = "";
      this.searchForm.direction = "";
      this.userlist1 = this.userlist;
      this.userlist = [];
      // console.log(this.userlist);
      // console.log(this.userlist1);
      this.searchForm.remarks = "";
      this.searchForm.shortName = "";
      this.searchForm.provinces = "";
      this.searchForm.citys = "";
      // 表单的搜索功能将表单的参数给修改了，所以要重新给表单的参数赋值，重新渲染
      this.queryInfo = {
        page: 1,
        pagesize: 10,
      };
      this.getQuestionsList();
    },
    // 表单的搜索功能
    async searchBtn(form) {
      const obj = this.searchForm;
      // 遍历对像
      for (let key in obj) {
        // 当对象值为空的时候，就删除为空的这些对象
        if (obj[key] === "") {
          delete obj[key];
        }
      }
      // 将不为空的值传递给渲染列表的参数
      this.queryInfo = this.searchForm;
      this.getQuestionsList();
    },
    // 预览
    async showDetails(row) {
console.log(row);
      // 加载基础题库详情
      try {
        const res = await detail(row);
        this.detailslist = res.data;
      } catch (err) {
        this.$message.error("获取详情失败！");
      }
      this.showdDetailDialogVisible = true;
    },
    // 关闭预览弹框
    DialogClosed() {
      this.videoState = false;
    },
    // 删除
    async deleteQuestion(id) {
      const confirmResult = await this.$confirm(
        "此操作将永久删除该题目, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      if (confirmResult !== "confirm") return this.$message.info("取消了删除");
      // 确认删除 调用接口
      try {
        await remove(id);
      } catch (err) {
        return this.$message.error("删除失败！");
      }
      if (this.questionlist.length === 1 && this.queryInfo.page > 1) {
        this.queryInfo.page--;
      }
      this.$message.success("删除成功");
      this.getQuestionsList();
    },
    // 加入精选
    async addToChioce(row) {
      this.ischoice.id = row.id;
      const confirmResult = await this.$confirm(
        "此操作将改题目加入精选, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      if (confirmResult !== "confirm")
        return this.$message.info("取消了加入精选");
      try {
        // 新创建一个对象，包括id和choicestate，给他们分别赋值
        await choiceAdd(this.ischoice);
      } catch (err) {
        return this.$message.error("加入精选题库失败！");
      }
      this.$message.success("加入精选成功");
      this.$router.push("/questions/choice");
    },
    // 获取城市下的地区
    getCitys() {
      try {
        this.cityslist = citys(this.searchForm.provinces);
        this.searchForm.citys = "";
      } catch (err) {
        return this.$message.error("获取城市下地区失败！");
      }
    },
  // 编辑
  editDialig(id){
    // console.log(id);
    const vm=this
    
    vm.$router.push({path:'/questions/new',query:{
      editid:id,
      editname:"questions"}})
  }
  
  },
  created() {
    this.getUserList();
    this.getSubjectsList();
    this.getQuestionsList();
    this.getDiretory();
    this.direction = direction;
    this.difficulty = difficulty;
    this.questionType = questionType;
    this.provinceslist = provinces();
  },
};
</script>

<style scoped lang='less'>
.addQuestions {
  float: right;
  margin-bottom: 15px;
  width: 97px;
  height: 32px;
  font-size: 12px;
}
.el-alert {
  margin-bottom: 10px;
}
.disable {
  pointer-events: none;
}
/deep/.el-input--medium .el-input__inner {
  height: 32px;
}
.el-card {
  margin: 10px;
}
/deep/p {
  display: inline;
}
.center-dia {
  display: flex;
  justify-content: center;
}
</style>
